<template>
	<view>
		<view style=" width: 100%;height: 250px;">
			<qiun-data-charts type="line" :opts="opts" :chartData="tubiao" />
		</view>
		<view class="tongji">
			<text>平台转化率</text> （各阶段占比）
		</view>
		
		<view style="width: 100%;height: 300px;">
			<qiun-data-charts type="ring" :opts="opts_ring" :chartData="chartDat" />
		</view>
		
		<view class="tongji">
			<text>个人转化率</text> （各阶段占比）
		</view>
		
		<view style="width: 50%;height: 200px;margin:0 auto;margin-top:30rpx;">
			<qiun-data-charts type="arcbar" :opts="opts_arcbar" :chartData="arcbar" />
		</view>
	</view>

</template>



<script>
	 export default {
		 props:{
		 	tubiao:{
		 		type: Object,
		 		default: () => {
				}
		 	},
			chartDat:{
				type:Object,
				default: () => {
				}
			},
			ring:{
				type:String,
				
			},
			chufa:{
				type:String
			},
			arcbar:{
				type:Object,
				default: () => {
				}
			},
			xiaoshu:{
				type:String 
			}
			
		 },
		data() {
			return {
				opts: {
					color: ["#FF609A", "#3BB0FE"],
					padding: [0, 15, 20, 15],
					legend: {
						show: true,
						position: "top",
						fontSize: "10",
						fontColor: "#999999",
					},
					xAxis: {
						dashLength: 1,
						disableGrid: true,
						fontColor: "#999999",
						axisLineColor: "#999999",
						fontSize: "9",
					},
					yAxis: {
						gridType: "dash",
						dashLength: 1,
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 1,
						gridColor: "#EEEEEE",
						padding: 10,
						showTitle: true,
						fontSize: "9",
						data: [{
								position: "left",
								title: "商铺(单)",
								fontColor: "#999999",
								axisLineColor: "#FFFFFF",
								fontSize: "9",
								titleFontColor: "#999999",
								titleFontSize: "10",
								titleOffsetY: "-4"
							},
							{
								position: "right",
								min: 0,
								max: 200,
								title: "个人(单)",
								textAlign: "left",
								fontColor: "#999999",
								axisLineColor: "#FFFFFF",
								fontSize: "9",
								titleFontColor: "#999999",
								titleFontSize: "10",
								titleOffsetY: "-4"
							}
						]
					},
					extra: {
						line: {
							type: "straight",
							width: 1
						}
					}
				},
				opts_ring: {
					rotate: false,
					rotateLock: false,
					color: ["#FF609A", "#3BD5B3", "#4A8BFE", "#6155CE", "#FFB451", "#FE4A4A"],
					padding: [0, 15, 15, 15],
					dataLabel: true,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
				 	name: "总单量",
						fontSize: 12,
						color: "#999999"
					},
					subtitle: {
						name: "22",
						fontSize: 26,
						color: "#333333",
					},
					extra: {
						ring: {
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
				 		offsetAngle: 0,
							labelWidth: 4,
							border: true,
							borderWidth: 2,
							borderColor: "#FFFFFF",
							linearType: "none" //渐变类型，可选值："none"关闭渐变,"custom"开启渐变
						}
					}
				},

				chartData_arcbar: {
					categories: [],
					series: [
					  {
						name: "订单成交/接单总量",
						data: ''
					  }
					]
				  },
				opts_arcbar: {
					color: ["#FF609A","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					// chartData: {
					// 	series: [
					// 	              {
					// 	                name: "订单成交/接单总量",
					// 	                data: this.xiaoshu
					// 	              }
					// 	            ]
					// },
					title: {
					  name: "0%",
					  fontSize: 24,
					  color: "#333333"
					},
					subtitle: {
					  name: "订单成交/接单总量",
					  fontSize: 15,
					  color: "#999999"
					},
					  opts: {
					        // padding: undefined,
					        extra: {
					          arcbar: {
					            type: "default",
					            width: 12,
					            backgroundColor: "#FFFFFF",
					            startAngle: 1,
					            endAngle: 0,
					            gap: 2,
					            // linearType: "custom",
								linearType: "none" //渐变类型，可选值："none"关闭渐变,"custom"开启渐变
					          }
					        }
					      }
				}

			}
		},
		
		watch: {
			ring(newValue) {
				let that=this
						console.log('that.opts_ring.subtitle.name',that.opts_ring.subtitle.name)
				console.log(that.opts_ring.subtitle.name);
						that.opts_ring.subtitle.name=newValue
			},
			chufa(newValue){
				let that=this
				that.opts_arcbar.title.name =newValue+ "%"
				console.log('chufa')
				console.log(that.opts_arcbar.title.name);
			},
			xiaoshu(newValue){
				let that=this
				that.opts_arcbar.chartData.series.data=newValue
				console.log('xiaoshu')
				console.log(that.opts_arcbar.chartData.series.data);
			}
		},
		onLoad() {
			
		},
		onReady() {

		},
		methods: {}
	}
</script>

<style lang="scss">
	.tongji {
		font-size: 20rpx;
		color: $qianhui_ziti;
		margin-left: 30rpx;
		border-left: 8rpx $zhuce_color solid;
		padding-left: 16rpx;
		text {
			font-weight: bold;
			font-size: 30rpx;
			color: $heise_ziti;
		}
	}
</style>
